<template>
    <div>
        <!-- 头部 -->
        <div class="header">
            <div class="left">
               <span @click="fun()">&lt;</span>
            </div>
            <div class="center">
                <h1>-预约上门-</h1>
                <p>及时服务 立买立享 变美就是这么简单</p>
            </div>
            <div class="right">
                <img src="../../../public/2.png" alt="">
            </div>
        </div>
        <!-- 路由 -->
        <div class="nav">
          <router-link to="/tj">推荐</router-link>
          <router-link to="/mj">美甲</router-link>
           <router-link to="/mjie">美睫</router-link>
           <router-link to="/mr">美容</router-link>
          <router-link to="/ll">理疗</router-link>
          <router-link to="/mf">美发</router-link>
          <router-link to="/hz">化妆</router-link>
          <router-link to="/byj">半永久</router-link>
          <router-link to="/td">体雕</router-link>
        </div>
    </div>
</template>

<script>
export default {
  methods: {
    fun() {
      this.$router.push("/home");
    }
  }
};
</script>

<style scoped>
.header {
  width: 100%;
  height: 3rem;
  background-color: #f4b997;
  display: flex;
  position: relative;
  position: fixed;
}
.header .left {
  flex: 1;
}
.header .left {
  color: white;
  font-size: 0.4rem;
}
.header .left span {
  position: absolute;
  top: 0.5rem;
}
.header .center {
  flex: 2.3;
}
.header .center h1 {
  font-size: 0.55rem;
  color: white;
  position: absolute;
  top: 0.5rem;
  left: 2.3rem;
}
.header .center p {
  color: white;
  position: absolute;
  top: 1.5rem;
}
.header .right {
  flex: 1;
}
.header .right img {
  position: absolute;
  top: 0.5rem;
  right: 0.2rem;
  width: 0.4rem;
  height: 0.4rem;
}
.nav {
  width: 100%;
  height: 0.9rem;
  display: flex;
  justify-content: space-around;
  overflow-x: auto;
  position: fixed;
  background-color: #fff;
  margin-top: 3rem;
}
.nav a {
  font-size: 0.26rem;
  text-align: center;
  line-height: 0.9rem;
  text-decoration: none;
  color: gray;
}
.nav .router-link-active {
  color: black;
  font-size: 0.32rem;
  font-weight: 700;
}
</style>
